<template>
  <div class="layout" :class="`theme-${theme}`">
    <slot></slot>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-facing-decorator';

@Component
class Layout extends Vue {

  public static readonly THEMES: Readonly<string[]> = ['light', 'dark'];
  @Prop({ default: 'light', validator: (v: string) => Layout.THEMES.indexOf(v) >= 0 })
  public theme!: string;
}
export default Layout;

</script>
<style scoped lang="stylus">
.layout
  position absolute
  width 100%
  height 100vh
</style>